//准备基础数据 吧图片放在一个数组中
let imgUrl = ['../image/1.jpg', '../image/2.jpg', '../image/3.png', '../image/4.jpg'];
//定时器编号
let id;
//标定当前轮播图的下标
let index = 0;
//找到轮播图图片对象
let img = document.querySelector('.img');
//找到分页器li对象数组
let li = document.querySelectorAll('.pagination>ul>li');
//找到轮播容器
let swiperstype = document.querySelector('.swiper-container');

//鼠标移入时执行的操作
swiperstype.addEventListener('mouseenter', stopLoop, false);
//鼠标移出时触发的函数和操作
swiperstype.addEventListener('mouseleave', loop, false);



//轮播操作
function loop() {
    //清空上一个定时器
    if (id) {
        clearInterval(id);
    }
    //新建一个定时器
    id = setInterval(function () {
        //对图片下标进行增加
        index++;
        if (index >= imgUrl.length) {
            index = 0;
        }
        //设置img的src值
        let imgScr = imgUrl[index];
        img.src = imgScr;

        //同步修改li的class属性
        for (let i = 0; i < li.length; i++) {
            li[i].className = '';
            if (i === index) {
                li[i].className = 'active';
            }
        }
    }, 1000)
}


//给每一个li绑定事件  放在li上会执行
for (let i = 0; li < li.length; i++) {
    //鼠标经过触发事件
    li[i].onmouseenter = function () {
        //修改当前li的激活
        for (let j = 0; j < li.length; j++) {
            li[j].className = '';
            if (i === j) {
                li[j].className = 'active';
            }
        }
        //修改img的图片
        index = i;
        let imgScr = imgUrl[index];
        img.src = imgScr;
    }
}

//停止轮播
function stopLoop() {
    if (id) {
        clearInterval(id);
    }
}
//启动
loop();




